<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAYRAY个人主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-image: url('../image/background.jpg'); /* 设置背景图片 */
            background-size: cover;
            background-attachment: fixed;
            background-position: center;
        }
        .container {
            width: 80%;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            padding: 20px;
            background-color: rgba(173, 216, 230, 0.8); /* 淡蓝色背景，透明度0.8 */
            color: #000080; /* 深蓝色文字 */
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .content {
            display: flex;
            flex-wrap: wrap; /* 允许内容换行，适配更多板块 */
            justify-content: space-between;
            gap: 20px; /* 板块之间的间距 */
            padding: 20px;
        }
        .section {
            width: 45%;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .section img {
            width: 100%;
            border-radius: 8px;
        }
        .section h2 {
            text-align: center;
            color: #333;
        }
        .return-home {
            position: relative;
            display: block;
            margin: 20px auto 0 auto;
            width: 200px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.8);
            color: #000;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            border-radius: 8px;
            text-decoration: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }
        .return-home:hover {
            background-color: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>RAYRAY个人主页</h1>
        </header>
        <div class="content">
            <!-- 学习板块 -->
            <div class="section">
                <h2>学习</h2>
                <img src="../image/study.jpg" alt="学习" usemap="#learningMap">
                <map name="learningMap">
                    <area shape="rect" coords="0,0,477,286" href="study1.html" alt="学习内容1">
                </map>
            </div>
            <!-- 游戏板块 -->
            <div class="section">
                <h2>游戏</h2>
                <img src="../image/db5dc2ea5135fad5a07db36b84275225.jpg" alt="游戏" usemap="#gamingMap">
                <map name="gamingMap">
                    <area shape="rect" coords="0,0,475,475" href="xiaowu.html" alt="游戏内容1">
                </map>
            </div>
            <!-- 锻炼板块 -->
            <div class="section">
                <h2>锻炼</h2>
                <img src="../image/exercise.jpg" alt="锻炼" usemap="#exerciseMap">
                <map name="exerciseMap">
                    <area shape="rect" coords="0,0,477,317" href="exercise.html" alt="锻炼内容1">
                </map>
            </div>
            <!-- 听歌板块 -->
            <div class="section">
                <h2>听歌</h2>
                <img src="../image/music.jpg" alt="听歌" usemap="#musicMap">
                <map name="musicMap">
                    <area shape="rect" coords="0,0,480,319" href="music.html" alt="听歌内容1">
                </map>
            </div>
        </div>
        <!-- 返回寝室主页按钮 -->
        <a href="qinshi.html" class="return-home" usemap="#homeMap">返回寝室主页</a>
        <map name="homeMap">
            <area shape="rect" coords="0,0,200,50" href="dormitory.html" alt="返回寝室主页">
        </map>
    </div>
</body>
</html>

